<template>
  <div class="container">
    <el-row>
      <el-col :span="12">
        <span class="text-left float-left">{{lang._473}}</span>
      </el-col>
      <el-col :span="12">
        <el-button class="btn float-right" type="primary" round style="margin-right:10px;">{{lang._474}}</el-button>
        <el-button class="btn float-right" type="text" round style="margin-right:0">{{lang._475}}</el-button>
      </el-col>
    </el-row>
    <el-row style="background:#FFF;border-radius:8px">
      <!--
             每个col 都是一行
             title 是标题，remark 是备注
             more_title 是右边要显示的文字，如果有这个则显示箭头，如果需要显示箭头又不显示文字，传个空格
             有个right 的插槽，适合右边需要自定义内容的 
         -->
      <g-row :lang="lang" :title="lang._476" :remark="lang._477">
        <template slot="right">
          <el-switch class="float-right switch" v-model="value3" active-text="开启" inactive-text="关闭">
          </el-switch>
        </template>
      </g-row>
      <g-row :lang="lang" :title="lang._478">
        <template slot="right">

          <el-tooltip placement="bottom">
            <div slot="content">
              <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522756177945&di=d8d0b6ffa685883dcaf70b5ab94ecc85&imgtype=0&src=http%3A%2F%2Ffiles.jb51.net%2Ffile_images%2Farticle%2F201412%2F2014121011501932.png"
                alt="">
            </div>
            <!-- <el-button>Top center</el-button> -->
            <img class="float-right" src="../../assets/eq.png" alt="" style="width:25px;height:25px;margin:12.5px 10px;" srcset="">
          </el-tooltip>
          <!-- 鼠标放上去有提示 -->
          <span class="more-title float-right">
            www.pofeng.com
          </span>
          <!-- 网址 -->
        </template>
      </g-row>
      <g-row :lang="lang" :title="lang._479" :more_title="template_img">
      </g-row>
      <g-row :lang="lang" :title="lang._480" :more_title="logo_img">
      </g-row>
      <g-row :lang="lang" :title="lang._481" more_title="0:00~23:59">
      </g-row>
      <g-row :lang="lang" :remark="lang._483" :title="lang._482">
        <template slot="right">
          <el-switch class="float-right switch" v-model="value3" active-text="开启" inactive-text="关闭">
          </el-switch>
        </template>
      </g-row>
      <g-row :lang="lang" :remark="lang._485" :title="lang._484" more_title=" "></g-row>
      <g-row :lang="lang" :title="lang._486" :more_title="lang._487"></g-row>
      <g-row :lang="lang" :title="lang._488" more_title="无"></g-row>
      <g-row :lang="lang" :title="lang._489" more_title="送货上门，会员余额支付"></g-row>
      <g-row :lang="lang" :title="lang._490" :more_title="lang._491">
        <template slot="right">
          <el-input class="float-right" style="width:102px;margin-top:11px" size="mini" placeholder="P"></el-input>
        </template>
      </g-row>
      <g-row :lang="lang" :title="lang._492" more_title="未开启"></g-row>
      <g-row :lang="lang" :title="lang._493" :remark="lang._494">
        <template slot="right">
          <el-switch class="float-right switch" v-model="value3" active-text="开启" inactive-text="关闭">
          </el-switch>
        </template>
      </g-row>
      <g-row :lang="lang" :title="lang._495" :remark="lang._496">
        <template slot="right">
          <el-switch class="float-right switch" v-model="value3" active-text="开启" inactive-text="关闭">
          </el-switch>
        </template>
      </g-row>
      <g-row :lang="lang" :title="lang._497">
        <template slot="right">
          <el-input class="float-left" type="textarea" :autosize="{ minRows: 3, maxRows: 4}" placeholder="请输入内容" v-model="textarea3"
            style="width:600px;margin-left:50px;">
          </el-input>

        </template>
      </g-row>
    </el-row>
  </div>
</template>
<style lang="less" scoped>
  .container {
    width: 860px;
    margin: 20px auto;
    .switch {
      margin-top: 10px;
      height: 30px;
      margin-right: 10px;
    }
    .btn {
      margin-top: 10px;
      height: 30px;
      line-height: 30px;
      padding: 0 20px;
      margin-left: 20px;
      margin-right: 20px;
    }
    span {
      font-size: 30px;
      color: #323644;
      line-height: 50px;
      margin: 0;
      padding-left: 10px;
    }
    .more-title {
      font-size: 15px;
      color: #409EFF;
      font-family: "微软雅黑";
      line-height: 50px;
      margin-left: 10px;
    } // .el-tooltip__popper{
    //   padding: 0 !important;
    // }
    // 二维码黑色边框
  }

</style>
<style>
  .el-textarea__inner {
    border: 0px !important
  }

</style>

<script>
  import grow from '../../components/row.vue'
  export default {
    props: ['lang'],
    components: {
      'g-row': grow
    },
    data() {
      return {
        value3: '',
        template_img: '<img style="height:40px;margin-top:5px;" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522756177945&di=d8d0b6ffa685883dcaf70b5ab94ecc85&imgtype=0&src=http%3A%2F%2Ffiles.jb51.net%2Ffile_images%2Farticle%2F201412%2F2014121011501932.png" alt="">',
        logo_img: '<img style="height:40px;margin-top:5px;" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522756177945&di=d8d0b6ffa685883dcaf70b5ab94ecc85&imgtype=0&src=http%3A%2F%2Ffiles.jb51.net%2Ffile_images%2Farticle%2F201412%2F2014121011501932.png" alt="">'
      }
    }
  }

</script>
